<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="../../js/public/jquery-2.2.3.min.js"></script>
    <script src="../../js/public/echarts.min.js"></script>
    <script src="../../js/public/china.js"></script>
    <title>家族数据</title>
    <style>
        body {
            margin: 0;
        }
        header {
            width: 100%;
            height: 50px;
            background-color: rgb(242,242,242);
            /*padding: 10px 0;*/
        }
        header .go-back {
            margin: 14px 10px;
            float: left;
            width: 25px;
        }
        header h4 {
            width: 90%;
            line-height: 50px;
            margin: 0;
            text-align: center;
        }
        #china-map {
            width:100%;
            height: 320px;
            margin: auto;
        }
        .mark {
            text-align: center;
        }
    </style>
</head>
<body>
<header>
    <a href="javascript:;" onclick="window.history.back()"><img src="../../images/back.png" class="go-back" alt=""/></a>
    <h4>区域分布</h4>
</header>
<div id="china-map"></div>
<div class="mark">注：标记的地址为人员分布区域</div>
<input hidden="hidden" value="福建" class="fArea"/>
<input hidden="hidden" value="湖南" class="hArea"/>
<input hidden="hidden" value="北京" class="bArea"/>
</body>
<script>
    var myChart = echarts.init(document.getElementById('china-map'));
    var fNum = $(".fArea").val()
    var hNum = $(".hArea").val()
    var bNum = $(".bArea").val()
    var option = {
        tooltip: {
//                    show: false //不显示提示标签
            formatter: '{b}', //提示标签格式
            backgroundColor:"#ff7f50",//提示标签背景颜色
            textStyle:{color:"#fff"} //提示标签字体颜色
        },
        series: [{
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: false,//显示省份标签
                    textStyle:{color:"#c71585"}//省份标签字体颜色
                },
                emphasis: {//对应的鼠标悬浮效果
                    show: true,
                    textStyle:{color:"#800080"}
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: .5,//区域边框宽度
                    borderColor: '#009fe8',//区域边框颜色
                    areaColor:"#ffefd5"//区域颜色
                },
                emphasis: {
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor:"#ffdead"
                }
            },
//            区域分布
            data:[
                {name:fNum, selected:true},//福建为选中状态
                {name:hNum, selected:true},//湖南为选中状态
                {name:bNum, selected:true}//北京为选中状态
            ]
        }]
    };

    myChart.setOption(option);
    myChart.on('mouseover', function (params) {
        var dataIndex = params.dataIndex;
        console.log(params);
    });
</script>
</html>